<template>
  <section id="orderMain"  class="order-main">
      <banner :imgList="imgList" :ratio="3.60" />

      <div class="order-card fx-row"  v-if="lastOrder.appointId">
          <div class="order-card-bg"></div>
          <div class="fx order-card-content">

              <div class="fx-row fx-row-top fx-row-space-between">
                  <h5 class="text-ellipsis card-store-title">{{lastOrder.storeName}}</h5>
                  <i class="logo logo-sm"></i>
              </div>

            <div class="order-card-desc">
                <p class="mb10">
                  <label>预约时间:</label>
                  <span class="font-respnse">{{getStarTime}} - {{getEndTime}}</span>
                </p>
              <p>
                <label>预约人数:</label>
                <span>{{lastOrder.peopleCount == 0 ? '包场' : lastOrder.peopleCount+'人'}}</span>
              </p>

            </div>
          </div>
      </div>

      <div  v-if="lastOrder.appointId">
        <p class="order-message mb15">
          {{showMessage}}
          <span v-if="lastOrder.type == 0 " class="text-primary">{{seckillMsg}}</span>
        </p>

        <!-- 首次开门按钮 -->
        <div class="text-center mb10">
          <button   :disabled="!isAllowOpenDoor" class="btn btn-hoz-md btn-primary btn-md" @click="onOpenDoor()">{{showOpenDoorText}}</button>
        </div>

        <!-- 临时开门 -->
        <div class="text-center" v-if="isShowTemporaryDoor(lastOrder.type)">
          <button @click="onOpenDoor('temp')" class="btn btn-primary btn-outline btn-hoz-md">临时开门</button>
        </div>
    </div>

    <div class="order-no-result"  v-if="!lastOrder.appointId">
      <p class="text-center text-record">您还没有预约记录</p>
      <div class="text-center">
        <button class="btn btn-hoz-md btn-primary btn-md" @click="addOrder()">立即预约</button>
      </div>
    </div>


  </section>
</template>
<style lang="scss" scoped>
  @import "../css/order-main";
</style>

<script type="text/javascript" src="../js/orderMain"></script>


